<template>
	<view class="sort-Header sort-position" v-if="sort.length > 0">
		<text>分类</text>
		<text>操作</text>
	</view>
	<view style="height: 90rpx;"></view>
	<view class="sort-Header sort-table" v-for="(item,index) in sort" :key="item.id">
		<text class="occupy">{{item.sort_name}}</text>
		<text class="sort-but" @click="removeSort(item._id,index,item.quantity)">删除</text>
	</view>
	
	<!-- 没有数据的提示 -->
	<view class="Tips" v-if="sort.length === 0">你还没有分类数据<br>请点击下方的"新增分类"按钮添加</view>
	
	<!-- 加载效果 -->
	<uni-load-more :status="load.status" :contentText="load.contentText" v-show="load.isShow"></uni-load-more>
	
	<!-- 底部新增分类按钮 -->
	<view style="height: 300rpx;"></view>
	<view class="newly-added-view">
		<view class="newly-added" @click="toggle('bottom')">新增分类</view>
	</view>
	
	<!-- 弹窗 -->
	<uni-popup ref="inputDialog" background-color="#fff" @change="change">
		<view class="popup-content">
			<view class="space-view">
				<view class="modify-sub" @click="gb">
					<image src="/static/detail/guanbi.svg" mode="widthFix"></image>
				</view>
				<view class="att-input">
					<input type="text" :focus="isFocus" confirm-type="done" v-model="sort_name" placeholder="输入分类" placeholder-class="I-style" cursor-spacing="50"/>
				</view>
				<view class="newly-added classif" @click="subMit">提交</view>
			</view>
		</view>
	</uni-popup>
	
</template>

<script setup>
	import {ref,onMounted,reactive,toRefs} from 'vue'
	import {init} from '@/Acc-config/init.js'
	
	let inputDialog= ref(null)
	
	const isFocus=ref(false)
	
	// 打开弹窗的方法
	function toggle(type) {
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		inputDialog.value.open(type)
		
		// 获取焦点
		setTimeout(()=>{
			isFocus.value=true
		},500)
	}
	
	// 弹窗的状态发生变化时触发-显示和隐藏
	function change(e) {
		// console.log('当前模式：' + e.type + ',状态：' + e.show);
		// 清空输入框
		data.sort_name=''
		isFocus.value=false
	}
	
	// 关闭弹窗
	function gb(){
		inputDialog.value.close()
	}
	
	onMounted(()=>{
		wx.showLoading({
			title:'加载中',
			mask:true,
		})
		getsort()
		wx.hideLoading()
	})
	
	// 定义存储到数据库中的对象
	const data=reactive({
		sort:[],//存储数据库中的字段
		sort_name:''//收集用户新增的分类名称，存储到数据库中
	})
	
	// 注意：在Vue3中不能使用解构的方式，取出一个响应式数据
	// const {sort,sort_name}=data
	const {sort,sort_name}=toRefs(data)
	
	// 请求数据库
	async function getsort(){
		let DB=await init()
		// collection('要操作的数据库集合名称')  database()操作数据库的方法  limit('查询的条数')指定查询结果集数量上限
		// 查询数据库的数据      field()指定数据库返回的字段 为false就是不需要返回该字段
		const res = await DB.database().collection('goods_sort').limit(10).field({_openid:false}).get()
		data.sort = res.data
	}
	
	// 新增分类，保存到数据库
	async function subMit(){
		if(data.sort_name==''){
			// 调用封装的消息提示框
			uni.$showMsg('请输入名称')
			return false
		}
		
		let DB=await init()
		// 查询数据库中是否已经存在相同的分类名称
		const query_data=await DB.database().collection('goods_sort').where({
			sort_name:data.sort_name
		}).get();
		if(query_data.data.length>0)uni.$showMsg('该分类已经存在')
		else{
			let res=await DB.database().collection('goods_sort').add({
				data:{//新增的数据
					sort_name:data.sort_name,//分类名称
					quantity:0//数量
				}
			})
			data.sort.push({
				quantity: 0,
				sort_name: data.sort_name,
				_id: res._id,//该id是数据库自动生成的
			})
			uni.$showMsg('新增成功','success')
			// 清空输入框
			data.sort_name=''
			// 关闭弹窗
			// gb()
		}
	}
	
	async function removeSort(id,index,quantity){
		if(quantity>0){
			uni.$showMsg('请先删除该分类下的商品','none') 
			return false
		}
	
		try{
			let DB=await init()
			uni.showModal({
				title:'确定要删除吗？',
				success:async function (res) {
					if (res.confirm) {//确定删除
					
						// doc获取集合中指定记录的引用。方法接受一个 id 参数，指定需引用的记录的 _id
						await DB.database().collection('goods_sort').doc(id).remove()
						data.sort.splice(index,1)
						uni.$showMsg('删除成功','success')
						
					} else if (res.cancel) {//取消删除
						// uni.$showMsg('已取消删除','none')
					}
				}
				
			})
			
		}catch(e){
			//TODO handle the exception
			uni.$showMsg('删除失败') 
		}	
	
	}
	
	// 加载效果配置
	const load=reactive({
		status:'more',//加载效果样式,
		contentText:{
			contentdown: "上拉显示更多数据",
		},
		isShow:false
	})
	
	// 上拉加载
	// 注意：在vue3中不能直接使用uniapp的生命周期函数 需要引入
	import {onReachBottom} from '@dcloudio/uni-app'
	let page=reactive(0)//当前页码
	onReachBottom(async()=>{
		load.status='loading'
		load.isShow=true
		load.contentText.contentrefresh='正在疯狂加载...'
		
		page++
		let sk = page * 10//10：每次从数据库中查询的数据条数
		const DB=await init()
		const res=await DB.database().collection('goods_sort').limit(10).skip(sk).field({_openid:false}).get()
		data.sort=[...data.sort,...res.data]
		
		// 数组对象去重
		// reducer 逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加
		// （上一步的计算结果是当前元素之前所有元素的总和）——直到没有更多的元素被相加。
		// 参数：1、上一次遍历的结果  2、当前遍历的结果
		let obj={}
		data.sort=data.sort.reduce((prev,now)=>{
			if(!obj[now._id]){
				prev.push(now)
				obj[now._id]=true
			}
			return prev
		},[])
		
		if(res.data.length<1){		
			load.status='more'
			load.contentText.contentdown='没有数据啦'
			return 
		}
		load.status='more'
		load.contentText.contentdown='上拉显示更多数据'
	})
</script>


<style>
	.text{
		display: flex;
		height: 100rpx;
	}
	.I-style{
		color: #cccccc;
	}
	.att-input{
		background-color: #f7f7f7;
		padding: 20rpx;
		border-radius: 7rpx;
	}
	.classif{
		margin: 60rpx 0 !important;
	}
	.modify-sub{
		display: flex;
		justify-content: flex-end;
		margin-right: 10rpx;
		padding-bottom: 60rpx !important;
	}
</style>